<template>
  <div class="add_news">
    <el-title :title="title"></el-title>
    <div class="news">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <!-- pc端 -->
        <el-tab-pane label="PC" name="pcPic">
          <el-button style="background: #31bdce; margin-bottom: 20px; color: white" @click="pcDialogVisible = true">新增PC轮播图片</el-button>
          <!-- 表格 -->
          <el-table :data="tableData" style="width: 100%" border stripe>
            <el-table-column prop="imges" label="图片" width="">
              <!--插入图片链接的代码-->
              <template slot-scope="scope" label="图片" width="">
                <img :src="scope.row.imges" alt="" style="height: 100px" />
              </template>
            </el-table-column>

            <el-table-column fixed="right" label="操作" width="60">
              <template slot-scope="scope">
                <el-button type="text" size="small" style="color: red" @click="pcRemoveImgById(scope.row.id)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>

        <!-- 移动端 -->
        <el-tab-pane label="移动端" name="second">
          <el-button style="background: #31bdce; margin-bottom: 20px; color: white" @click="DialogVisible = true">新增YD轮播图片</el-button>
          <!-- 表格 -->
          <el-table :data="tableDatas" style="width: 100%" border stripe>
            <el-table-column prop="imges" label="图片" width="">
              <!--插入图片链接的代码-->
              <template slot-scope="scope" label="图片" width="">
                <img :src="scope.row.imges" alt="" style="height: 100px" />
              </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="60">
              <template slot-scope="scope">
                <el-button type="text" size="small" style="color: red" @click="removeImgById(scope.row.id)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </div>

    <!--  PC 上传图片弹框 -->
    <el-dialog title='请在上传成功后点击"确定"' :visible.sync="pcDialogVisible" width="30%">
      <el-upload
        action="/api/denglu/upload"
        list-type="picture-card"
        :limit="1"
        :auto-upload="true"
        :on-success="handleSuccessPc"
        :on-error="handleErrorPc"
        :on-progress="UploadIng"
        ref="remove"
        v-loading.fullscreen.lock="fullscreenLoading"
      >
        <i slot="default" class="el-icon-plus"></i>
        <div slot="file" slot-scope="{ file }">
          <img class="el-upload-list__item-thumbnail" :src="file.url" />
          <span class="el-upload-list__item-actions">
            <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
              <i class="el-icon-delete"></i>
            </span>
          </span>
        </div>
      </el-upload>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancel()">取 消</el-button>
        <el-button type="primary" @click="pcUploadPic()">确 定</el-button>
      </span>
    </el-dialog>

    <!--  移动上传图片弹框 -->
    <el-dialog title='请在上传成功后点击"确定"' :visible.sync="DialogVisible" width="30%">
      <el-upload
        action="/api/denglu/upload"
        list-type="picture-card"
        :limit="1"
        :auto-upload="true"
        :on-success="handleSuccess"
        :on-error="handleError"
        :on-progress="UploadIng"
        ref="remove"
        v-loading.fullscreen.lock="fullscreenLoading"
      >
        <i slot="default" class="el-icon-plus"></i>
        <div slot="file" slot-scope="{ file }">
          <img class="el-upload-list__item-thumbnail" :src="file.url" />
          <span class="el-upload-list__item-actions">
            <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
              <i class="el-icon-delete"></i>
            </span>
          </span>
        </div>
      </el-upload>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancel()">取 消</el-button>
        <el-button type="primary" @click="uploadPic()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import elTitle from '@/components/title.vue'
import { getImgPc, getImgYd, loginAddImg, DelImg } from '@/utils/index.js'
export default {
  data() {
    return {
      title: '轮播管理',
      activeName: 'pcPic',
      // PC 上传图片弹框
      pcDialogVisible: false,
      // 移动 上传图片弹框
      DialogVisible: false,
      disabled: false,
      // 上传图片
      imges: '',
      is_pc: 0,
      tableData: [],
      tableDatas: [],
      // loading加载中
      fullscreenLoading: false,
    }
  },
  computed: {},
  components: {
    elTitle,
  },
  created() {
    // 获取pc 图片接口
    getImgPc().then((res) => {
      this.tableData = res.data
    })
    //  获取移动图片接口
    getImgYd().then((res) => {
      this.tableDatas = res.data
    })
  },
  methods: {
    // tab
    handleClick(tab, event) {
      console.log(tab, event)
    },
    handleRemove(file) {
      console.log(file)
      this.$refs.remove.clearFiles()
    },
    filerChange() {
      console.log('上传')
    },
    // pc文件上传成功时的钩子
    handleSuccessPc(res) {
      this.imges = res.data.src
      this.is_pc = 1
      this.$notify.success({
        title: '成功',
        message: `文件上传成功`,
      })
      // 关闭loading
      this.fullscreenLoading = false
    },
    // pc文件上传失败时的钩子
    handleErrorPc(err) {
      console.log(err)
      this.$notify.error({
        title: '错误',
        message: `文件上传失败`,
      })
    },
    // pc确定
    pcUploadPic() {
      this.pcDialogVisible = false
      loginAddImg({
        is_pc: this.is_pc,
        imges: this.imges,
      }).then((res) => {
        if (res.code == '0') {
          // 更改成功
          this.$message.success(res.msg)
          this.$refs.remove.clearFiles()
          // 获取pc 图片接口
          getImgPc().then((res) => {
            this.tableData = res.data
          })
        } else {
          this.$message.error(res.msg)
        }
      })
    },

    // 移动文件上传成功时的钩子
    handleSuccess(res) {
      this.imges = res.data.src
      this.is_pc = 2
      this.$notify.success({
        title: '成功',
        message: `文件上传成功`,
      })
      // 关闭loading
      this.fullscreenLoading = false
    },
    // 移动文件上传失败时的钩子
    handleError(err) {
      console.log(err)
      this.$notify.error({
        title: '错误',
        message: `文件上传失败`,
      })
    },
    // 移动确定
    uploadPic() {
      this.DialogVisible = false
      loginAddImg({
        is_pc: this.is_pc,
        imges: this.imges,
      }).then((res) => {
        if (res.code == '0') {
          // 更改成功
          this.$message.success(res.msg)
          this.$refs.remove.clearFiles()
          //  获取移动图片接口
          getImgYd().then((res) => {
            this.tableDatas = res.data
          })
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    // pc删除img
    async pcRemoveImgById(id) {
      // 弹框询问是否确定删除
      const comfirmResult = await this.$confirm('此操作将永久删除该图片, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        // 捕获错误消息
      }).catch((err) => err)
      if (comfirmResult !== 'confirm') {
        return this.$message.info('已取消删除')
      } else {
        DelImg({ id: id }).then((res) => {
          if (res.code == '0') {
            this.$message.success(res.msg)
            // 获取pc 图片接口
            getImgPc().then((res) => {
              this.tableData = res.data
            })
          } else {
            this.$message.error(res.msg)
          }
        })
      }
    },

    // 移动端删除img
    async removeImgById(id) {
      // 弹框询问是否确定删除
      const comfirmResult = await this.$confirm('此操作将永久删除该图片, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        // 捕获错误消息
      }).catch((err) => err)
      if (comfirmResult !== 'confirm') {
        return this.$message.info('已取消删除')
      } else {
        DelImg({ id: id }).then((res) => {
          if (res.code == '0') {
            this.$message.success(res.msg)
            // 获取pc 图片接口
            getImgYd().then((res) => {
              this.tableDatas = res.data
            })
          } else {
            this.$message.error(res.msg)
          }
        })
      }
    },
    // 取消上传
    cancel() {
      this.pcDialogVisible = false
      this.DialogVisible = false
      this.$refs.remove.clearFiles()
    },
    // 上传中
    UploadIng() {
      // 打开 loading
      this.fullscreenLoading = true
    },
  },
}
</script>

<style lang="scss" scoped>
.news {
  background-color: white;
  margin-top: 15px;
  padding: 50px;
}
</style>